<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">小程序工作台设置</div>
                    <div class="layui-card-body">
                        <div style="margin-bottom: 10px;">
                            <div class="layui-input-item" style="float:left;padding-right:10px;">
                                <form class="layui-form">
                                    <div class="layui-inline">
                                        <a id="btn-add" class="layui-btn">添加</a>
                                        <a id="btn-fold" class="layui-btn layui-btn-primary">折叠</a>
                                        <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                                    </div>
                                </form>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                        <table class="layui-hide" id="workbench-table" lay-filter="workbench-table"></table>
                        <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="popup-form">
    <div class="layui-card">
        <div class="layui-card-header">工作台详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="popup-form">
                <input type="hidden" name="id">
                <input type="hidden" name="parentId" value="0">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="img" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">页面</label>
                    <div class="layui-input-block">
                        <input type="text" name="page" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数字接口</label>
                    <div class="layui-input-block">
                        <input type="text" name="badgeUrl" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">序号</label>
                    <div class="layui-input-block">
                        <input type="number" name="sn" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</script>
    <script src="/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index'
        }).use(['index', 'table', 'form', 'treeGrid'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var treeGrid = layui.treeGrid;
            var popupIndex;

            var tree = treeGrid.render({
                id: 'workbench-table',
                elem: '#workbench-table',
                url: 'workbenches',
                cellMinWidth: 100,
                idField: 'id',//必須字段
                treeId: 'id',//树形id字段名称
                treeUpId: 'parentId',//树形父id字段名称
                treeShowName: 'title',//以树形式显示的字段
                height: '100%',
                isFilter: false,
                iconOpen: false,//是否显示图标【默认显示】
                isOpenDefault: true,//节点默认是展开还是折叠【默认展开】
                loading: true,
                method: 'get',
                isPage: false,
                cols: [[
                    { field: 'title', title: '标题' },
                    { field: 'img', title: '图标' },
                    { field: 'sn', width: 80, align: 'center', title: '序号' },
                    { field: 'page', width: 400, title: '页面' },
                    {
                        width: 200, title: '操作', align: 'center', toolbar: '#toolbar-operation'
                    }
                ]],
                parseData: function (res) {//数据加载后回调
                    return res;
                },
                onClickRow: function (index, o) {
                    //console.log(index, o, "单击！");
                },
                onDblClickRow: function (index, o) {
                    //console.log(index, o, "双击");
                },
                onCheck: function (obj, checked, isAll) {//复选事件
                    //console.log(obj, checked, isAll, "复选");
                },
                onRadio: function (obj) {//单选事件
                    //console.log(obj, "单选");
                }
            });

            function showPopupForm() {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#popup-form').html();
                        $('#' + this.id).html(formHtml);
                        form.render();
                    }
                });
                return popupIndex;
            }

            function closePopupForm() {
                if (popupIndex) {
                    layer.close(popupIndex);
                }
            }

            $("#btn-add").on('click', function () {
                popupIndex = showPopupForm();
            });

            $("#btn-fold").on('click', function () {
                var treedata = treeGrid.getDataTreeList('workbench-table');
                var isOpen = treedata[0][treeGrid.config.cols.isOpen];
                treeGrid.treeOpenAll('workbench-table', !isOpen);
                if (isOpen) {
                    $(this).text('展开');
                } else {
                    $(this).text('折叠');
                }
            });

            $("#btn-refresh").on('click', function () {
                treeGrid.reload('workbench-table');
            });

            treeGrid.on('tool(workbench-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'add') {
                    showPopupForm();
                    form.val('popup-form', { parentId: data.id });
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除该记录吗？', function (index) {
                        $.ajax({
                            url: 'workbenches/' + data.id,
                            type: 'DELETE',
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    treeGrid.reload('workbench-table');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showPopupForm();
                    form.val('popup-form', data);
                }
            });

            form.on('submit(form-submit)', function (data) {
                $.ajax({
                    url: 'workbenches',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            treeGrid.reload('workbench-table');
                        } else {
                            layer.msg('提交失败');
                            console.error('提交失败');
                        }
                    }
                });
                closePopupForm();
                return false;
            });
        });
    </script>
</body>

</html>